<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 商品展示 - 优化后 -->
<%@ page import="pro4.ProductDAO, pro4.Product, java.util.List" %>
<%
  ProductDAO dao = new ProductDAO();
  List<Product> products = dao.getAllProducts();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>购物主页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
    }

    body {
      background-color: #f9f9f9;
      color: #333;
      scroll-behavior: smooth;
    }

    /* 固定导航栏 */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(51, 51, 51, 0.95);
      color: white;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .navbar a {
      color: white;
      text-decoration: none;
      margin-left: 20px;
      font-weight: 500;
      transition: color 0.3s ease;
      position: relative;
    }

    .navbar a:hover {
      color: #ff4d4d;
    }

    .navbar a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -5px;
      left: 0;
      background-color: #ff4d4d;
      transition: width 0.3s ease;
    }

    .navbar a:hover::after {
      width: 100%;
    }

    /* 页面主体偏移，避免被导航遮挡 */
    .main-content {
      margin-top: 80px;
    }

    /* 轮播样式 - 优化后 */
    .swiper-container {
      width: 100%;
      height: 50vh;
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      border-radius: 0;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: clamp(2em, 6vw, 3.5em);
      font-weight: bold;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
      position: relative;
    }

    .swiper-slide::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
    }

    .swiper-slide-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 0 20px;
      max-width: 800px;
    }

    .swiper-slide .slide-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 30px;
      background-color: #ff4d4d;
      color: white;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 500;
      font-size: 16px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4);
    }

    .swiper-slide .slide-btn:hover {
      background-color: #ff3333;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(255, 77, 77, 0.6);
    }

    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 1;
    }

    .swiper-pagination-bullet-active {
      background: #ff4d4d;
      width: 30px;
      border-radius: 6px;
    }

    .swiper-button-next, .swiper-button-prev {
      color: white;
      background: rgba(0, 0, 0, 0.3);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .swiper-button-next:hover, .swiper-button-prev:hover {
      background: rgba(0, 0, 0, 0.6);
    }

    .swiper-button-next::after, .swiper-button-prev::after {
      font-size: 20px;
      font-weight: bold;
    }

    .section-title {
      font-size: 28px;
      font-weight: 600;
      margin: 40px 0 20px;
      padding: 0 20px;
      color: #333;
      position: relative;
      display: inline-block;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 20px;
      width: 50px;
      height: 3px;
      background-color: #ff4d4d;
    }

    .section-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 25px;
      padding: 0 20px 40px;
    }

    .product-card {
      background-color: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
      position: relative;
    }

    .product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

    .product-image {
      width: 100%;
      height: 0;
      padding-top: 100%; /* 正方形图片 */
      background-color: #f5f5f5;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }

    .product-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: #ff4d4d;
      color: white;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      z-index: 2;
    }

    .product-actions {
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      transition: all 0.3s ease;
      opacity: 0;
    }

    .product-card:hover .product-actions {
      bottom: 20px;
      opacity: 1;
    }

    .action-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: white;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .action-btn:hover {
      background-color: #ff4d4d;
      color: white;
      transform: translateY(-3px);
    }

    .product-info {
      padding: 20px;
      position: relative;
    }

    .product-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #444;
    }

    .product-category {
      font-size: 12px;
      color: #888;
      margin-bottom: 10px;
    }

    .product-price {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .current-price {
      color: #ff4d4d;
      font-size: 18px;
      font-weight: 600;
    }

    .original-price {
      color: #999;
      font-size: 14px;
      text-decoration: line-through;
      margin-left: 5px;
    }

    .rating {
      color: #ffc107;
      font-size: 14px;
    }

    .rating-count {
      color: #888;
      font-size: 12px;
      margin-left: 5px;
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 40px 0 20px;
      font-size: 14px;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      padding: 0 20px;
      text-align: left;
    }

    .footer-column h3 {
      color: white;
      margin-bottom: 20px;
      font-size: 18px;
      position: relative;
      padding-bottom: 10px;
    }

    .footer-column h3::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: #ff4d4d;
    }

    .footer-column ul {
      list-style: none;
    }

    .footer-column ul li {
      margin-bottom: 10px;
    }

    .footer-column ul li a {
      color: #ccc;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-column ul li a:hover {
      color: #ff4d4d;
    }

    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }

    .social-links a {
      color: white;
      background-color: rgba(255, 255, 255, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .social-links a:hover {
      background-color: #ff4d4d;
      transform: translateY(-3px);
    }

    .copyright {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    @media (max-width: 992px) {
      .swiper-container {
        height: 40vh;
      }
    }

    @media (max-width: 768px) {
      .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
      }

      .navbar a {
        margin-left: 0;
        margin-bottom: 10px;
        font-size: 14px;
      }

      .main-content {
        margin-top: 120px;
      }

      .swiper-container {
        height: 35vh;
      }

      .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }

    @media (max-width: 576px) {
      .swiper-container {
        height: 30vh;
      }

      .swiper-slide {
        font-size: 1.8em;
      }

      .swiper-slide .slide-btn {
        padding: 8px 20px;
        font-size: 14px;
      }

      .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
      }

      .product-info {
        padding: 15px;
      }

      .current-price {
        font-size: 16px;
      }

      .section-title {
        font-size: 24px;
        margin: 30px 0 15px;
      }
    }
    /* 新增退出按钮样式 */
    .logout-btn {
      background-color: #ff4d4d;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 20px;
      margin-left: 20px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
    }

    .logout-btn:hover {
      background-color: #e60000;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(255, 77, 77, 0.3);
    }

    .logout-btn i {
      margin-right: 5px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .logout-btn {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
      }
    }
  </style>
</head>
<body>

<!-- 固定导航栏 -->
<div class="navbar">
  <div>
    <a href="#"><i class="fas fa-home"></i> 主页</a>
    <a href="#"><i class="fas fa-list"></i> 商品分类</a>
    <a href="#"><i class="fas fa-info-circle"></i> 关于我们</a>
    <a href="/chenweilong_war_exploded/Ans4/cart.jsp"><i class="fas fa-shopping-cart"></i> 购物车</a>
    <a href="/chenweilong_war_exploded/Ans4/product_management.jsp"><i class="fas fa-shopping-cart"></i> 商品管理</a>
  </div>
  <div style="font-size: 16px; font-weight: 600;"><i class="fas fa-store"></i> 陈威龙商城</div>
  <button class="logout-btn" onclick="logout()">
    <i class="fas fa-sign-out-alt"></i> 退出登录
  </button>
</div>

<!-- 页面内容 -->
<div class="main-content">

  <!-- 轮播图 - 优化后 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="swiper-slide-content">
          <h2>夏季促销季</h2>
          <p>全场商品低至5折起</p>
          <a href="#" class="slide-btn">立即抢购</a>
        </div>
      </div>
      <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="swiper-slide-content">
          <h2>新品上市</h2>
          <p>最新科技产品限时抢购</p>
          <a href="#" class="slide-btn">查看新品</a>
        </div>
      </div>
      <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="swiper-slide-content">
          <h2>会员专属</h2>
          <p>注册会员享额外优惠</p>
          <a href="#" class="slide-btn">加入会员</a>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- 商品展示 - 优化后 -->

  <div class="section-container">
    <h2 class="section-title">🔥 热门商品</h2>
    <div class="product-grid">
      <% for (Product p : products) { %>
      <div class="product-card">
        <div class="product-image" style="background-image: url('<%= request.getContextPath() + "/Ans4/" + (p.getImageUrl() != null ? p.getImageUrl() : "https://via.placeholder.com/300") %>');"></div>
        <div class="product-info">
          <div class="product-name"><%= p.getName() %></div>
          <div class="product-price">
            <span class="current-price">¥<%= p.getPrice() %></span>
          </div>
          <div class="product-stock">
            库存：<%= p.getStock() %>
          </div>

          <!-- 加入购物车按钮 -->
          <form action="<%= request.getContextPath() %>/addCartItem" method="post" accept-charset="UTF-8">
            <input type="hidden" name="id" value="<%= p.getId() %>">
            <input type="hidden" name="name" value="<%= p.getName() %>">
            <input type="hidden" name="price" value="<%= p.getPrice() %>">
            <input type="hidden" name="imageUrl" value="<%= p.getImageUrl() %>">
            <button type="submit">加入购物车</button>
          </form>

        </div>
      </div>
      <% } %>
    </div>
  </div>

<!-- 底部版权 - 优化后 -->
<footer>
  <div class="footer-content">
    <div class="footer-column">
      <h3>关于我们</h3>
      <ul>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">发展历程</a></li>
        <li><a href="#">企业文化</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>客户服务</h3>
      <ul>
        <li><a href="#">购物指南</a></li>
        <li><a href="#">支付方式</a></li>
        <li><a href="#">配送方式</a></li>
        <li><a href="#">售后服务</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>法律信息</h3>
      <ul>
        <li><a href="#">隐私政策</a></li>
        <li><a href="#">用户协议</a></li>
        <li><a href="#">知识产权</a></li>
        <li><a href="#">法律声明</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>关注我们</h3>
      <p>订阅我们的新闻通讯，获取最新优惠信息</p>
      <div class="social-links">
        <a href="#"><i class="fab fa-weixin"></i></a>
        <a href="#"><i class="fab fa-weibo"></i></a>
        <a href="#"><i class="fab fa-qq"></i></a>
        <a href="#"><i class="fab fa-tiktok"></i></a>
      </div>
    </div>
  </div>
  <div class="copyright">
    &copy; 2025 大刀肉商城 版权所有 | 设计开发: 大刀肉团队
  </div>
</footer>

<!-- 引入 Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  function logout() {
    if(confirm('确定要退出登录吗？')) {
      // 这里可以添加AJAX请求到后端处理退出逻辑
      // 或者直接跳转到退出处理的Servlet/JSP
      window.location.href = 'login.jsp'; // 替换为您的退出处理页面
    }
  }
  // 初始化 Swiper - 优化后
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    speed: 1000,
    parallax: true,
    grabCursor: true,
  });
</script>
</div>
</body>
</html>